<template>
  <div class="direction-area" :class="$store.state.currentTheme">
    <el-empty v-if="text === ''" description="暂无教程..."></el-empty>
    <v-md-preview id="md-preview" v-else :text="text"></v-md-preview>
  </div>
</template>

<script>
export default {
  name: 'DirectionArea',
  data() {
    return {
      text: '',
    };
  },
};
</script>

<style>
.hljs-keyword {
  color: #409eff !important;
}

.github-markdown-body {
  padding: 10px;
}

.direction-area {
  overflow: auto;
  text-align: left;
  height: 100%;
}

#md-preview {
  height: 0px;
}
</style>
